<template>
  <van-nav-bar :title="name" left-arrow @click-left="onClickLeft">
    <template #right>
      <van-popover
        v-model:show="showPopover"
        theme="dark"
        placement="bottom-end"
        close-on-click-overlay
      >
        <ul>
          <li v-for="item in actions" @click="(event) => Onclick(item)">
            <p></p>
            <van-icon :name="item.icon" />
            <span>{{ item.text }}</span>
          </li>
        </ul>
        <template #reference>
          <van-button type="primary"><van-icon name="ellipsis" /></van-button>
        </template>
      </van-popover>
    </template>
  </van-nav-bar>
</template>

<script lang="ts" setup>
import router from '@/router'
//导航栏左按钮
const onClickLeft = () => {
  if (props.rout) {
    return router.push(props.rout)
  }
  return history.back()
}

//
const props = defineProps(['name', 'rout'])

//弹窗开关
const showPopover = ref(false)
//

const actions = [
  { text: '首页', icon: 'wap-home-o', router: '/films' },
  { text: '分类搜索', icon: 'search', router: '/category' },
  { text: '购物车', icon: 'cart-o', router: '/cart' },
  { text: '浏览记录', icon: 'newspaper-o', router: '/browsingHistory' }
]

function Onclick(item: Actions) {
  router.push(item.router)
}
</script>

<style scoped>
li {
  display: flex;
  padding: 10px 20px;
}
ul span {
  margin-left: 5px;
  width: 100%;
  border-bottom: 2px solid #333232;
}
.van-button--primary {
  background-color: #fff;
  border: none;
  color: black;
  font-size: 40px;
}
</style>
